<template>
    <div class="student">
        <h1>姓名：{{ name }}</h1>
        <!-- 在模板中，使用ref()封装过的变量值，是不需要[变量名.value]，直接使用变量就可以 -->
        <h1>年龄：{{ age }}</h1>
        <button @click="showTel">点我显示联系电话</button>
        <button @click="changeAge">年龄+1</button>
        <button @click="changeName">点我改名</button>
    </div>
</template>

<script setup lang="ts" name="Student">
    //1、引入ref
    import {ref} from 'vue'
    /*
        创建响应式数据---使用 ref()函数
        格式：
            let 变量名=ref(初始值);
        前提：先引入库
    */
    //使用ref创建响应式数据
    let name = ref('学生张三');
    let age = ref(666); //我们通过ref()将666作为参数复制给age，实际上age并不是整数类型的666，而是一个ref函数返回的对象
    let tel = 13636363366;
    function showTel() {
        alert(tel);
    }
    function changeAge() {
        //当我们在<script>标签脚本中获取ref()封装过的变量值，需要[变量名.value]
        //alert(age.value)
        //console.log("年龄--->",age.value);
        age.value+=1;
    }
    function changeName(){
        name.value='学生-李四'
    }
</script>


<style scoped>
.student {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
